<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
    {#    <script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>#}
</head>
<body>
<h1>微信接口</h1>
<ol>
    <li><a href="https://api.weixin.qq.com/cgi-bin/getcallbackip?access_token={{ access_token }}">获取微信服务器IP地址</a></li>
    <li><a href="https://api.weixin.qq.com/cgi-bin/menu/get?access_token={{ access_token }}">自定义菜单查询</a></li>
    <li><a href="https://api.weixin.qq.com/cgi-bin/get_current_selfmenu_info?access_token={{ access_token }}">获取自定义菜单配置信息</a>
    </li>
</ol>
<div id="app">
    {% verbatim myblock %}
        {{ message }}
    {% endverbatim myblock %}
    <button v-on:click="showData">点击查看微信服务器IP地址</button>
</div>


<script type="text/javascript">
    var app = new Vue({
        el: '#app',

        data: {
            message: '',
        },

        mounted: function () {
            this.showData();

        },

        methods: {
            showData: function () {
                var _self = this;
                $.ajax({
                    type: 'GET',
                    url: 'api/ip',
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        _self.message =  data.ip_list;
                    }
                });
            }
        }
    })
</script>


</body>
</html>